<template>
	<view class="personalInfo">
		<view class="background-img-box">
			<image class="background-img" src="http://localhost:8099/static/" mode=""></image>
		</view>
		<view class="top">
			<view class="person-img-box">
				<image class="person-img" src="http://localhost:8099/img/9.jpg" mode=""></image>
			</view>
			<view class="change" v-show="pages===personPage"  @click="goTo">
				编辑资料
			</view>
			<view class="userSty" v-show="pages===userPage" :class="{activeCla:flag==true}" @click="selectPer">
				{{select}}
			</view>
		</view>
		<view class="name-box">
			<view class="name">
				{{userName}}
			</view>
			<view class="douyinId">
				抖音号:{{douyinId}}
			</view>
		</view>
		<view class="text-box">
			我爱航天
		</view>
		<view class="label-box">
			<view class="label">
				清华大学
			</view>
			<view class="label">
				北京
			</view>
		</view>
		<view class="number-box">
			<view class="box">
				<text class="number-text">获赞</text>
				<text class="number">132323</text>
			</view>
			<view class="box">
				<text class="number-text">关注</text>
				<text class="number">123</text>
			</view>
			<view class="box">
				<text class="number-text">粉丝</text>
				<text class="number">123</text>
			</view>
		</view>
		<view class="add-box">
			<text class="iconfont icon-iconset0239 icon"></text>
			<text class="add">添加随拍</text>
		</view>
		<view class="option-box">
			<view class="option" :class="style1" @click="click('作品')">
				作品
			</view>
			<view class="option" :class="style2" @click="click('动态')">
				动态
			</view>
			<view class="option" :class="style3" @click="click('喜欢')">
				喜欢
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['pages'],
		name:"personalInfo",
		data() {
			return {
				style1:'active',
				style2:'',
				style3:'',
				userName:'张三',
				douyinId:'sg14853412',
				userPage:'user',
				personPage:'personal',
				flag:false,
				select:'关注+'
			};
		},
		created() {
			this.getuserName();
			this.getdouyinId();
			console.log(this.pages);
		},
		methods:{
			selectPer(){
				this.flag=!this.flag;
				if(this.flag==false){
					this.select='关注+'
				}else{
					this.select='已关注√'
				}
			},
			getdouyinId(){
				let that = this;
				uni.getStorage({
					key:'douyinId',
					success(res){
						that.douyinId=res.data;
					}
				})
			},
			getuserName(){
				let that = this;
				uni.getStorage({
					key:'userName',
					success(res){
						console.log('aaaaa')
						that.userName=res.data;
					}
				})
			},
			goTo(){
				uni.navigateTo({
					url:"/pages/changeInfo/changeInfo"
				})
			},
			
			click(res){
				switch (res){
					case "作品":
					this.style1='active';
					this.style2='';
					this.style3='';
					this.$emit('change',res);
					break;
					case "动态":
					this.style2='active';
					this.style1='';
					this.style3='';
					this.$emit('change',res);
							break;
					case "喜欢":
					this.style3='active';
					this.style2='';
					this.style1='';
					this.$emit('change',res);
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style>
.personalInfo{
	width: 100%;
	background-color: #000000;
	color: #fff;
}
.background-img-box{
	width: 100%;
	padding:0 1px;
	position: relative;
	z-index: 19;
}
.background-img{
	width: 100%;
	/* height: 180px; */
}
.top{
	width:100%;
	position: absolute;
	top:240px;
	left: 0;
	z-index: 20;
	height: 60px;
}
.person-img-box{
	margin:-25px 0 0 30px;
}
.person-img{
	width: 80px;
	height: 80px;
	border-radius: 50%;
	z-index: 20;
	border:4px solid #000000;
}
.change{
	background-color: #333;
	position: absolute;
	top: 15px;
	right: 25px;
	width: 50%;
	height: 35px;
	line-height: 35px;
	font-size: 16px;
	text-align: center;
	border-radius: 2px;
	z-index: 24;
	color: #fff;
}
.name-box{
	padding:0 25px;
	color:#eee;
	z-index: 20; 
	margin-top:60px;
}
.name{
	height: 50px;
	line-height: 50px;
	font-size: 24px;
}
.douyinId{
	height: 25px;
	line-height: 25px;
	font-size: 14px;
}
.text-box{
	padding:0 25px;
	margin-top:8px;
	border-top:1px solid #222;
}
.introduce{
	height: 30px;
	line-height: 30px;
	font-size: 15px;
	color:#eee;
}
.label-box{
	width: 100%;
	height: 25px;
	margin-top: 15px;
	margin-left: 23px;
	line-height: 25px;
	color: #eee;
}
.label{
	height: 20px;
	padding:0 5px;
	line-height: 20px;
	font-size: 11.5px;
	background-color: #333;
	color: #999999;
	float: left;
	border-radius: 1.5px;
	margin-right: 10px;
}
.number-box{
	margin-left: 20px;
	width:100%;
	height: 50px;
	line-height: 50px;
}
.box{
	height: 40px;
	line-height: 40px;
	float: left;
	margin-right: 5px;
}
.number{
	color: #fff;
	font-size: 15px;
}
.number-text{
	color:#999;
	font-size: 13px;
}
.add-box{
	margin:0 6%;
	height: 40px;
	background-color: #333;
	border-radius: 3px;
	text-align: center;
	color: #fff;
}
.add{
	padding-left: 5px;
	/* height: 40px; */
	line-height: 40px;
}
.icon{
	font-size: 26px;
	line-height: 40px;
}
.option-box{
	width: 100%;
	height: 50px;
	line-height: 50px;
}
.option{
	width: 33%;
	height: 50px;
	line-height: 50px;
	color: #999;
	float: left;
	text-align: center;
}
.active{
	border-bottom: 3px solid yellow;
}
.userSty{
	background-color: red;
	position: absolute;
	top: 15px;
	right: 25px;
	width: 50%;
	height: 35px;
	line-height: 35px;
	font-size: 16px;
	text-align: center;
	border-radius: 2px;
	z-index: 21;
	color: #fff;
}
.activeCla{
	background-color: #333;
}
</style>
